// 待自自己编写
/*
  1) 这个文件的主要作用是什么?
  - 权限控制 (整个项目的 页面访问拦截 和 权限 都是在这个文件中写的)
  - 一般像后台管理系统项目, 都是需要做权限控制的
    - 如果用户没有token, 统一拦截去登录
    - 如果用户访问一些不需要拦截的页面, 直接放行

  2) 页面访问拦截的具体步骤
  - 配置一个白名单数组
    const whiteList = ['/login', '/404']
  - 在路由的全局前置守卫中
    - 获取token
    - 判断
      - 如果有token
        - 访问的是登录页, 或者404页面, 引导去首页
        - 访问其它页面, 直接放行
      - 如果没有token
        - 访问的是登录页, 或者404页面,直接放行
        - 访问是其它页面, 拦截去登录页面
*/
// 导入路由模块
import router from '@/router'
// 导入vuex的内容模块
import store from '@/store'
// 创建一个白名单不管有没有token都可以进入以下页面
const whiteList = ['/login', '/404']
// 做一个进度条效果
import NProgress from 'nprogress' // 引入进度条工具库
import 'nprogress/nprogress.css' // 进度条样式
/**
 * 路由的前置守卫
 */
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()
  // 判断是否有token
  if (store.getters.token) {
    // 有token的方法
    if (to.path === '/login') {
      // 当有token的时候判断它是不是还是去登录页,是的话把它强制转去首页面
      next('/')
      // 手动强制关闭一次
      NProgress.done()
    } else {
      // 用户资料有个硬性要求，必须有token才可以获取，那么我们就可以在确定有token的位置去获取用户资料
      if (!store.getters.userId) {
        // 如果没有id这个值 才会调用 vuex的获取资料的action
        const { roles } = await store.dispatch('user/getUserInfo')
        // 为什么要写await 因为我们想获取完资料再去放行
        // 根据获取到动态路由数组来进行操作
        console.log(roles.menus)
        const routes = await store.dispatch('permission/filterRoutes', roles.menus)
        console.log(routes)
        // 添加路由
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // addRoutes是一个异步函数,这里将404的路由放入这个数组里面。防止刷新404
        next(to.path)
        // 测试
      } else {
        // 如果有token但是不是去登录页的话就可以放行
        next()
      }
    }
  } else {
    // 如果没有token的处理
    if (whiteList.includes(to.path)) {
      // 如果是去以上白名单的地址就放行
      next()
    } else {
      // 不是去白名单的地址的话就先去登陆页面登录
      next('/login')
      // 手动强制关闭一次
      NProgress.done()
    }
  }
})
/**
 * 路由的后置守卫
 */
router.afterEach(() => {
  // 关闭进度条
  NProgress.done()
})
